<script lang="ts">
import { defineComponent, onActivated, onMounted, provide, ref } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  inheritAttrs: false,
  setup () {
    const chartNode = ref<HTMLDivElement | null>(null)
    const ready = ref(false)
    onMounted(() => {
      const dom = chartNode.value!
      const chart = echarts.init(dom)
      provide('echart', chart)
      ready.value = true
      const resize = () => chart.resize()
      onActivated(() => {
        resize()
      })
      // const observer = new ResizeObserver(() => window.requestAnimationFrame(resize))
      // observer.observe(dom)
      // onUnmounted(() => {
      //   observer.unobserve(dom)
      //   observer.disconnect()
      // })
    })
    return {
      chartNode,
      ready
    }
  }
})
</script>
  <template>
  <div ref="chartNode" class="e-chart-x" v-bind="$attrs"></div>
  <slot v-if="ready"></slot>
</template>
  <style scoped>
.e-chart-x {
  height: 100%;
  width: 100%;
}
</style>
